<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"    %>
    <%
		String path = request.getContextPath();
		String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
	%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%request.setCharacterEncoding("utf-8"); %>
<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>用户管理</title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--font-awesome.css?v=4.4.0-->
    <link href="https://cdn.staticfile.org/font-awesome/4.4.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!--bootstrap.min.css-->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <!--custom.css-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/plugins/iCheck/custom.css"/>
	<!--style.css-->
	<link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
	<!--jquery.min.js-->
	<script src="https://cdn.staticfile.org/jquery/2.1.4/jquery.min.js"></script>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<form action="<%=basePath%>BackstageServlet/listMemberInfo" action="method" target="">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>会员列表</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>
                <div class="ibox-content">
                	
                    <div class="row">
                        <div class="col-sm-3 pull-right">
                            <div class="input-group">
                                <input type="text" name="user_name" placeholder="请输入会员姓名..." value="${user_name}" class="form-control">
                                <span class="input-group-btn">
                                    <button type="submit" id="select" class="btn btn-primary fa fa-search" style="width: 70px;height: 34px;text-align: center;line-height: 23px;">&nbsp;搜索</button>
                                </span>
                            </div>
                        </div>
                    <!-- 四个按钮 -->
                    <div class="btn btn-primary fa fa-plus" onclick="addMember()" style="margin-left:15px;border-radius: 0%;width: 80px;height: 40px;text-align: center;line-height: 27px;">&nbsp;新增</div>
                    <div class="btn btn-primary fa fa-edit" onclick="editMember()" style="border-radius: 0%;width: 80px;height: 40px;text-align: center;line-height: 27px;">&nbsp;修改</div>
                    <div class="btn btn-primary fa fa-recycle" onclick="deleteMember()" style="border-radius: 0%;width: 80px;height: 40px;text-align: center;line-height: 27px;">&nbsp;删除</div>
                    <div class="btn btn-primary fa fa-refresh" onclick="resetMemberPass()" style="border-radius: 0%;width: 180px;height: 40px;text-align: center;line-height: 27px;">&nbsp;初始化密码123456</div>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-hover">
                            <thead>
                            <tr>
                                <th>选择</th>
                                <th>姓名</th>
                                <th>性别</th>
                                <th>联系电话</th>
                                <th>角色</th>
                                <th>会员类型</th>
                                <th>推荐人</th>
                                <th>状态</th>
                                <th>最后修改时间</th>
                            </tr>
                            </thead>
                            <tbody>
                           <c:forEach items="${memberInfoList}" var="memberList">
                             <tr>
                                <td>
                                    <input type="checkbox" class="i-checks mid" name="user_id" value="${memberList.user_id}" memberId="${memberList.user_id}">
                                </td>
                                <td>${memberList.user_name }</td>
                                <td>${memberList.user_gender }</td>
                                <td>${memberList.user_tel }</td>
                                <td>${memberList.role_name }</td>
                                <td>${memberList.type_name }</td>
                                <td>${memberList.user_tuijian}</td>
                                <c:if test="${memberList.state_name=='启用'}">
                                	<td align="center" style="line-height: 34px;"><input type="button" onclick="transitionState(this)" user_id="${memberList.user_id}" class="btn btn-info btn-xs" value="${memberList.state_name }" /></td>
                                </c:if>
                               <c:if test="${memberList.state_name=='禁用'}">
                                	<td align="center" style="line-height: 34px;"><input type="button" onclick="transitionState(this)" user_id="${memberList.user_id}" class="btn btn-danger btn-xs" value="${memberList.state_name }" /></td>
                               </c:if>
                                <td>${memberList.user_time }</td>
                            </tr>
                           </c:forEach>
                            </tbody>
                        </table>
                    </div>

                </div>
            </div>
        </div>
    </div>
    </form>
     <div class="pag text-center"></div>
</div>
<!--bootstrap.min.js-->
<script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!--jquery.peity.min.js-->
<script src="<%=basePath%>js/plugins/peity/jquery.peity.min.js" type="text/javascript" charset="utf-8"></script>
<!--content.js-->
<script src="<%=basePath%>js/content.js" type="text/javascript" charset="utf-8"></script>
<!--icheck.min.js-->
<script src="<%=basePath%>js/plugins/iCheck/icheck.min.js" type="text/javascript" charset="utf-8"></script>
<!--peity-demo.js-->
<script src="<%=basePath%>js/demo/peity-demo.js" type="text/javascript" charset="utf-8"></script>
<!--layer.min.js-->
<script src="<%=basePath%>js/plugins/layer/layer.min.js" type="text/javascript" charset="utf-8"></script>
<!-- toastr.min.js -->
<script src="<%=basePath%>js/plugins/toastr/toastr.min.js" type="text/javascript" charset="utf-8"></script>
<!-- jquery-bootstrap-pagination.js -->
<script src="<%=basePath%>js/plugins/jquery-bootstrap-pagination/jquery-bootstrap-pagination.js" type="text/javascript" charset="utf-8"></script>
<!-- pubic.js -->
<script src="<%=basePath%>js/pubic.js" type="text/javascript" charset="utf-8"></script>

<script>
	/* $(function(){
		 //提示信息
	    if('${result!=null}'){
	    	alert('${result}');
	    }
	}); */
	//复选框选中样式
    $(document).ready(function () {
        $(".i-checks").iCheck(
        	{checkboxClass: "icheckbox_square-green", 
        	radioClass: "iradio_square-green",})
    });
    //新增会员弹窗
    function addMember(){
    	layer.open({
    		type: 2,
            skin: 'body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}',
            title:'会员新增',
            area:['900px','550px'],
            closeBtn: 0,
            shadeClose:true,
           
            content:['${pageContext.request.contextPath}/pages/houtai/member/member_add.jsp','no'],
            yes:function(index,layero){
            	$("iframe").contents().find('#submit').click();
                $("iframe").contents().find('form').submit();
                account = setTimeout(function() {layer.close(index);}, 100);
            }
    	});
    }
    function fresh(){
    	 window.location.reload();
    }
    //修改会员信息弹窗
    function editMember(){
    	if($(':checked').length>1){
    		layer.msg('只能选择一条会员信息!!!', {icon: 5});
    	}else if($(':checked').length==0){
    		layer.msg('请选择一条会员信息!!!', {icon: 5});
    	}else{
    		layer.open({
        		type: 2,
                skin: 'body .demo-class .layui-layer-title{background:#c00; color:#fff; border: none;}',
                title:'会员信息修改',
                area:['900px','550px'],
                closeBtn: 0,
                shadeClose:true,
                
                content:['${pageContext.request.contextPath}/pages/houtai/member/member_edit.jsp?user_id='+$('.mid:checked').attr('memberId'),'no'],
                yes:function(index,layero){
                	$("iframe").contents().find('#submit').click();
                	
                    $("iframe").contents().find('form').submit();
                   
                    account = setTimeout(function() {layer.close(index);}, 100);
                }
        	}); 
    	}
    	 
    }
   
    //删除会员
    function deleteMember(){
    	if($(':checked').length>1){
    		layer.msg('一旦删除无法恢复<br>您确定要删除吗?',{
    			time:4000,
    			btn:['确定','取消'],
    			yes:function(index,layero){
    				$.get('${pageContext.request.contextPath}/BackstageServlet/deleteSelectMember',$('.mid:checked').serialize(),function(data){
    					if(data==1){
    						 $('.mid:checked').each(function () {
    			                  n = $(this).parent('tr').index();
    			                  $('table').find('tr:eq('+n+')').remove();
    			              });
    						 layer.msg('删除成功',function(){
     							time:1000
     						});
    					}else{
    						layer.msg('删除失败',function(){
    							time:1000
    						});
    					}
    				});
    			}
    		});
    	}else if($(':checked').length==0){
    		layer.msg('至少选择一条会员信息!!!', {icon: 5});
    	}else{
    		layer.msg('一旦删除无法恢复<br>您确定要删除吗?',{
    			time:4000,
    			btn:['确定','取消'],
    			yes:function(index,layero){
    				$.get('${pageContext.request.contextPath}/BackstageServlet/deleteMember',{"user_id":$('.mid:checked').attr("memberId")},function(data){
    					if(data==1){
    						$('.mid:checked').parent().parent().parent().remove();
    						layer.msg('删除成功',function(){
    							time:1000
    						});
    					}else{
    						layer.msg('删除失败',function(){
    							time:1000
    						});
    					}
    				});
    			}
    			
    		});
    	}
    }
    
    //初始化会员密码
    function resetMemberPass(){
    	if($(':checked').length>1){
    		layer.msg('您确定要初始化会员的密码吗?',{
    			time:4000,
    			btn:['确定','取消'],
    			yes:function(index,layero){
    				$.get('${pageContext.request.contextPath}/BackstageServlet/resetSelectMemberPass',$('.mid:checked').serialize(),function(data){
    					if(data==1){
    						layer.msg('密码初始化成功',function(){
    							time:1000
    						});
    					}else{
    						layer.msg('密码初始化失败',function(){
    							time:1000
    						});
    					}
    				});
    			}
    		});
    	}else if($(':checked').length==0){
    		layer.msg('至少选择一条会员信息!!!', {icon: 5});
    	}else{
    		layer.msg('您确定要初始化该会员的密码吗?',{
    			time:4000,
    			btn:['确定','取消'],
    			yes:function(index,layero){
    				$.get('${pageContext.request.contextPath}/BackstageServlet/resetMemberPass',{"user_id":$('.mid:checked').attr("memberId")},function(data){
    					if(data==1){
    						layer.msg('密码初始化成功',function(){
    							time:1000
    						});
    					}else{
    						layer.msg('密码初始化失败',function(){
    							time:1000
    						});
    					}
    				});
    			}
    			
    		});
    	}
    }
    
   
    //启用与禁用效果
    function transitionState(obj){
    	if($(obj).val()=='启用'){
    		layer.msg('是否禁用', {
			  time: 20000, //20s后自动关闭
			  btn: ['是', '否'],
			  yes:function(index,layero){
				  $.get('${pageContext.request.contextPath}/BackstageServlet/editMemberState',{"user_id":$(obj).attr("user_id"),"state_name":$(obj).val()},function(data){
					  if(data==1){
						$(obj).removeClass('btn-info').addClass('btn-danger');
			    		$(obj).val('禁用');
			    		layer.msg('禁用成功',{
		    				time:1000
		    			});
					  }else{
		    			layer.msg('禁用失败',{
		    				time:1000
		    			});
					  }
				  });
			  	
			  }
			});
    	}else{
    		layer.msg('是否启用', {
			  time: 20000, //20s后自动关闭
			  btn: ['是', '否'],
			  yes:function(index,layero){
				  $.get('${pageContext.request.contextPath}/BackstageServlet/editMemberState',{"user_id":$(obj).attr("user_id"),"state_name":$(obj).val()},function(data){
					  if(data==1){
						  	$(obj).removeClass('btn-danger').addClass('btn-info');
			    			$(obj).val('启用');
			    			layer.msg('启用成功',{
			    				time:1000
			    			});
					  }else{
		    			layer.msg('启用失败',{
		    				time:1000
		    			});
					  }
				  });
			  }
			});
    		
    	}
    }
    //分页
    pagination(${pageCount},${pageNum});
</script>

</body>

</html>
